<template>
  <div class="detail">
    <Header />
    <div class="detail-content">
      <div class="detail-nav">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>商城</el-breadcrumb-item>
          <el-breadcrumb-item>所有商品</el-breadcrumb-item>
          <el-breadcrumb-item>商品详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="detail-de">
          <div class="detail-de-left">
            <div class="detail-de-left-img">
              <img :src="imgList.find(item => item.id == selectedActive)?.imgSrc" alt=""/>
            </div>
            <div class="detail-de-left-img-item">
              <swiper
                :slidesPerView="4"
                :spaceBetween="30"
                class="img-items"
                :pagination="{
                  clickable: true,
                }"
                :modules="modules"
              >
                <swiper-slide v-for="item in imgList"  :style="`border: 1px solid ${ item.id == selectedActive ? '#088395' : 'rgba(20, 28, 29, 0.1)' };`" @click="selectImgHandler(item.id)" :key="item.id" class="img-item">
                  <img :src="item.imgSrc" alt="" />
                </swiper-slide>
              </swiper>
            </div>
          </div>
          <div class="detail-de-right">
            <div class="detail-de-right-brand">
              NobleCraft
            </div>
            <div class="detail-de-right-title">
              巴洛克华冠
            </div>
            <div class="detail-de-right-rate">
              <el-rate v-model="value" size="large" disabled />
              <span>{{ value }}分（121人已看）</span>
            </div>
            <div class="detail-de-right-price">
              ￥599.00
            </div>
            <div class="detail-de-right-arg1">
              <div class="detail-de-right-arg-item">正品保证</div>
              <div class="detail-de-right-arg-item">货真价实</div>
            </div>
            <div class="detail-de-right-arg2">
              <span>
                布料：
              </span>
              <div :class="`detail-de-right-arg-item ${ activeMaterial == item.id ? 'is_actived' : '' }`" v-for="item in material" :key="item.id" @click="clickMaterial(item.id)">{{ item.name }}</div>
            </div>
            <div class="detail-de-right-arg3">
              <span>
                尺寸：
              </span>
              <div :class="`detail-de-right-arg-item ${ activeSize == item.id ? 'is_actived' : '' }`" v-for="item in size" :key="item.id" @click="clickSize(item.id)">{{  item.name  }}</div>
            </div>
            <div class="detail-de-right-buy">
              <div class="detail-de-right-buy-count">
                <div class="count-left" @click="decrement" onselectstart='return false'>-</div>
                <div class="count-center">
                  <input type="text" v-model="num">
                </div>
                <div class="count-right" @click="increment" onselectstart='return false'>+</div>
              </div>
              <div class="detail-de-right-buy-btn">
                加入购物车
              </div>
            </div>
          </div>
        </div>
        <div class="detail-desc">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane name="first">
              <template #label>
                <span class="custom-tabs-label">
                  <span>商品描述</span>
                </span>
              </template>
              <Description />
            </el-tab-pane>
            <el-tab-pane name="second">
              <template #label>
                <span class="custom-tabs-label">
                  <span>附加说明</span>
                </span>
              </template>
              <Additional />
            </el-tab-pane>
            <el-tab-pane name="third">
              <template #label>
                <span class="custom-tabs-label">
                  <span>评论</span>
                </span>
              </template>
              <Reviews />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="detail-related-title">相关产品</div>
        <div class="detail-related">
          <Card v-for="(item, index) in card" :item="item" :key="index" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Pagination } from 'swiper/modules'
import { ArrowRight } from '@element-plus/icons-vue'
import Description from '@/view/shopDetail/description/index.vue'
import Additional from '@/view/shopDetail/additional/index.vue'
import Reviews from '@/view/shopDetail/reviews/index.vue'
import Card from '@/component/card.vue'
import { ref } from 'vue'

const value = ref(3.7)
const num = ref(1)
const card = ref([
{ img: '/img/g1.png', brand: 'EleganceWood', name: '米兰时尚椅', price: '￥298.00' },
  { img: '/img/g2.png', brand: 'NobleCraft', name: '威尼斯晨光沙发', price: '￥699.00' },
  { img: '/img/g3.png', brand: 'PrestigeFurniture', name: '雅致流苏边桌', price: '￥369.00' },
  { img: '/img/g4.png', brand: 'regalTimber', name: '极简立方体边桌', price: '￥239.00' }
])

const modules = ref([ Pagination ])

const imgList = ref([
  {
    id: 1,
    imgSrc: '/img/g1.jpg'
  },
  {
    id: 2,
    imgSrc: '/img/g2.jpg'
  },
  {
    id: 3,
    imgSrc: '/img/g3.jpg'
  },
  {
    id: 4,
    imgSrc: '/img/g4.jpg'
  },
  {
    id: 5,
    imgSrc: '/img/g5.jpg'
  },
  {
    id: 6,
    imgSrc: '/img/g6.jpg'
  },
  {
    id: 7,
    imgSrc: '/img/g7.jpg'
  }
])

const selectedActive = ref(1)

// 用户点击轮播图中的图片时触发
const selectImgHandler = (id: number) => {
  selectedActive.value = id
  console.log(id)
}


const increment = () => {
  if (num.value <  99) {
    num.value++
  }
}

const decrement = () => {
  if (num.value > 1) {
    num.value--
  }
}

const activeName = ref('first')

// 所有材质
const material = ref([
  {
    id: 1, name: '尼龙'
  },
  {
    id: 2, name: '棉质'
  },
  {
    id: 3, name: '真皮'
  },
  {
    id: 4, name: '涤纶'
  }
])

// 所有尺寸
const size = ref([
  {
    id: 1, name: 'S（30mm*30mm）'
  },
  {
    id: 2, name: 'M（50mm*50mm）'
  },
  {
    id: 3, name: 'L（80mm*80mm）'

  }
])

// 用户选中的材质
const activeMaterial =  ref<Number>(1)
// 用户选中的尺寸
const activeSize =  ref<Number>(1)

// 用户选择材质
const clickMaterial = (item: Number) => {
  activeMaterial.value = item
}
// 用户选择尺寸
const clickSize = (item: Number) => {
  activeSize.value = item
}
</script>

<style lang="less" scoped>
.detail {
  .detail-content {
    width: 70%;
    margin: auto;
  }

  .detail-nav {
    margin: 50px 0;
  }

  .detail-de {
    margin: 50px 0 0;
    display: flex;

    .detail-de-left {
      .detail-de-left-img {
        width: 600px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border: 1px solid rgba(20, 28, 29, 0.1);
        position: relative;

        img {
          width: 500px;
          height: 500px;
        }
      }

      .detail-de-left-img-item {
        // width: 100%;
        margin: 25px 0 0;
        user-select: none;

        .img-items {
          width: 600px;

          .img-item {
            width: 123px;
            height: 123px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 90px;
              height: 90px;
              display: block;
            }
          }
        }

        
      }
    }

    .detail-de-right {
      margin-left: 30px;
      .detail-de-right-brand {
        color: rgb(20, 28, 29);
        font-family: Epilogue;
        font-size: 20px;
        font-weight: 400;
      }

      .detail-de-right-title {
        margin-top: 10px;
        color: rgb(20, 28, 29);
        font-family: Epilogue;
        font-size: 30px;
        font-weight: 700;
      }

      .detail-de-right-rate {
        display: flex;
        align-items: center;
        margin-top: 10px;

        :deep(.el-rate__icon) {
          font-size: 24px;
          margin-right: 0;
        }

        span {
          display: inline-block;
          margin-left: 10px;
          color: rgb(163, 170, 171);
          font-family: Epilogue;
          font-size: 16px;
          font-weight: 400;
        }
      }

      .detail-de-right-price {
        margin-top: 10px;
        color: rgb(20, 28, 29);
        font-family: Epilogue;
        font-size: 20px;
        font-weight: 400;
      }

      .detail-de-right-arg1 {
        display: flex;
        margin-top: 20px;

        .detail-de-right-arg-item {
          border: 1px solid #088395;
          color: #088395;
          padding: 3px 7px;
          font-size: 15px;
          margin-right: 15px;
        }
      }

      .detail-de-right-arg2 {
        margin-top: 20px;
        display: flex;

        .detail-de-right-arg-item {
          cursor: pointer;
          border: 1px solid rgba(172, 172, 172, 0.3);
          color: rgb(109, 109, 109);
          padding: 3px 7px;
          font-size: 15px;
          margin-right: 15px;
        }

        .is_actived {
          border: 1px solid #088395;
          color: #088395;
        }
      }

      .detail-de-right-arg3 {
        margin-top: 20px;
        display: flex;

        .detail-de-right-arg-item {
          cursor: pointer;
          border: 1px solid rgba(172, 172, 172, 0.3);
          color: rgb(109, 109, 109);
          padding: 3px 7px;
          font-size: 15px;
          margin-right: 15px;
        }

        .is_actived {
          border: 1px solid #088395;
          color: #088395;
        }
      }

      .detail-de-right-buy {
        margin-top: 30px;
        display: flex;

        .detail-de-right-buy-count {
          display: flex;

          .count-left {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            width: 40px;
            height: 50px;
            box-sizing: border-box;
            border: 1px solid rgba(163, 170, 171, 0.2);
            border-radius: 10px 0px 0px 10px;
          }

          .count-center {
            display: flex;
            justify-content: center;
            align-items: center;

            width: 40px;
            height: 50px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(163, 170, 171, 0.2);
            border-top: 1px solid rgba(163, 170, 171, 0.2);

            input {
              margin-top: 3px;
              font-size: 16px;
              text-align: center;
              width: 40px;
              outline: none;
              border: none;
            }
          }

          .count-right {
            display: flex;
            justify-content: center;
            align-items: center;

            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            width: 40px;
            height: 50px;
            box-sizing: border-box;
            border: 1px solid rgba(163, 170, 171, 0.2);
            border-radius: 0px 10px 10px 0px;
          }
        }

        .detail-de-right-buy-btn {
          cursor: pointer;
          margin-left: 20px;
          width: 350px;
          height: 50px;
          border-radius: 10px;
          background: rgb(8, 131, 149);

          color: rgb(255, 255, 255);
          font-family: Epilogue;
          font-size: 16px;
          font-weight: 400;

          display: flex;
          justify-content: center;
          align-items: center;

          transition: background 0.4s;
        }

        .detail-de-right-buy-btn:hover {
          background: rgb(22, 162, 184);
        }
      }
    }
  }

  .detail-desc {
    margin-top: 50px;

    .demo-tabs ::v-deep(.el-tabs__item) {
      font-family: Epilogue;
      font-size: 20px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0%;
      text-align: left;
      padding-bottom: 12px;
    }
  }

  .detail-related-title {
    color: rgb(20, 28, 29);
      font-family: Epilogue;
      font-size: 40px;
      font-weight: 700;

      margin: 50px 0;
  }

  .detail-related {
    display: flex;
    justify-content: space-between;
  }
}
</style>